<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div style="height: 100px"></div>
        <div style="padding-top:50px">
            <textarea id="ta1" style="width:500px;height: 300px;margin-top: 20px;margin-left: 30px;" onclick="showNum()">
This example uses the createTextRange method to create a text range for the document, and then uses the text range to display all the text and HTML tags in the document.
            </textarea>
        </div>
        <div id="msgDiv" style="font-size: 16px;color:#F90;margin-left: 100px"></div>
        <div id="posDiv" style="position: absolute; width: 100px;height: 50px;background-color:bisque "></div>
        <!--        <div style="background-color: #F90;width: 200px;height: 200px;overflow:auto;" contenteditable="true"></div>-->
        <script type="text/javascript">
            //获取元素的绝对纵坐标 
            function getTop(e){ 
                var offset=e.offsetTop; 
                if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
                return offset; 
            } 
            //获取元素的绝对横坐标 
            function getLeft(e){ 
                var offset=e.offsetLeft; 
                if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
                return offset; 
            } 
        </script>
        <script type="text/javascript">
            function selectionNum() {
                //Creates a TextRange object from the current text selection, or a controlRange collection from a control selection.根据当前选择的文本创建文本对象
                var selectionTextRange = document.selection.createRange();
                var msgDiv = document.getElementById("msgDiv");
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "rangeText : " + selectionTextRange.text; 
            }
            function showNum() {
                var msgDiv = document.getElementById("msgDiv");
                msgDiv.innerHTML = "";
                var textArea = document.getElementById("ta1");
                
                //Creates a TextRange object for the element.
                var textRange = ta1.createTextRange(); 
                
                //移动文本矩形区域到指定坐标
                //msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "event: " + event.x+","+event.y; 
                //将文本范围(start/end)定位到某点上，可通过此点，扩大范围。
                //textRange.moveToPoint(event.x,event.y);  
                //Sets or retrieves the text contained within the range.
                //textRange.text = textRange.text + "The property is read/write. The property has no default value.";
                //文本范围start移动到textarea起始点
                //textRange.moveStart("character",-event.srcElement.value.length);
                textRange.moveStart("character",10);
                //移动文字插入点到range start,会将文本范围的置为0
                textRange.collapse(true);
                //When applied to a TextRange object, the select method causes the current object to be highlighted.
                textRange.select();
                
                //矩形文本范围
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "rangeText : " + textRange.text; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "boundingHeight : " + textRange.boundingHeight; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "boundingWidth : " + textRange.boundingWidth; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "boundingLeft : " + textRange.boundingLeft; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "boundingTop : " + textRange.boundingTop; 
                //相对offsetParent的参数
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "offsetHeight : " + textArea.offsetHeight; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "offsetWidth : " + textArea.offsetWidth; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "offsetLeft : " + textArea.offsetLeft; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "offsetTop : " + textArea.offsetTop; 
                //client指的是“可视”区域：不包括边框和滚动条，包括padding和height
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "clientHeight : " + textArea.clientHeight; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "clientWidth : " + textArea.clientWidth; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "clientLeft : " + textArea.clientLeft; 
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "clientTop : " + textArea.clientTop; 
                //绝对定位
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "absoluteTop : " + getTop(textArea);
                msgDiv.innerHTML = msgDiv.innerHTML + "<br />" + "absoluteLeft : " + getLeft(textArea); 
                var posDiv = document.getElementById("posDiv");
                //Note1:offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px
                //Note2:offsetTop/Left返回的是距离其offsetParent的距离，而不是相对浏览器的绝对距离
                //alert(getTop(textArea));
                //posDiv.style.top = getTop(textArea) + "px";
                //posDiv.style.left = getLeft(textArea) + "px";
            }
            showNum();
        </script>
    </body>
</html>
